<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影天堂 - 看电影就上电影天堂</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        .print-btn {
            display: inline-block;
            margin-top: 5px;
            padding: 10px 16px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        .print-btn:hover {
            background-color: #218838;
        }

        .print-btn i {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<!-- 头部区域 -->
<header th:replace="~{top}"></header>

<!-- 主要内容区域 -->
<main>
    <section class="rankings">
        <div class="container">
            <h1>电影排行榜</h1>

            <div class="ranking-tabs">
                <nav class="tabs">
                    <button class="tab-btn active" data-tab="weekly">本周排行</button>
                    <button class="tab-btn" data-tab="monthly">本月排行</button>
                    <button class="tab-btn" data-tab="all-time">全部排行</button>
                    <button class="tab-btn" data-tab="top-rated">好评排行</button>
                    <a class="print-btn" href="/export"><i class="fas fa-print"></i> 打印电影播放榜单</a>
                </nav>

                <div class="tab-content active" id="weekly">
                    <div class="ranking-list" id="weekly-ranking">
                        <!-- 排行榜内容将通过JavaScript动态加载 -->
                    </div>
                </div>

                <div class="tab-content" id="monthly">
                    <div class="ranking-list" id="monthly-ranking">
                        <!-- 排行榜内容将通过JavaScript动态加载 -->
                    </div>
                </div>

                <div class="tab-content" id="all-time">
                    <div class="ranking-list" id="all-time-ranking">
                        <!-- 排行榜内容将通过JavaScript动态加载 -->
                    </div>
                </div>

                <div class="tab-content" id="top-rated">
                    <div class="ranking-list" id="top-rated-ranking">
                        <!-- 排行榜内容将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- 页脚区域 -->
<footer th:replace="~{footer :: footer}"></footer>

<!-- 站点 JavaScript -->
<script src="/js/movies.js"></script>
<script src="/js/main.js"></script>
</body>
</html>



